<template>
    <div class="ebox">
        <div ref="box" class="box" v-Rchatrs="handleResize">
            1</div>
    </div>
</template>

<script  setup>
import { registerLoading } from "echarts";

const {proxy} = getCurrentInstance()
let myChart = null

const box = ref(null)
let myData3 = [
    "11-14",
    "11-15",
    "11-16",
    "11-17",
    "11-18",
    "11-19",
    "11-20",
];
let numA = [200, 250, 320, 420, 380, 180, 280];
let xse = [200, 200, 280, 350, 320, 150, 250];


const rendercharts = () => {
    let option = {
        backgroundColor: "#011a38",
        tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                textStyle: {
                    color: "#fff",
                },
            },
            textStyle: {
                color: "#fff",
            },
            backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
            confine: true,
        },
        grid: {
            top: "16%",
            left: "5%",
            right: "5%",
            bottom: "4%",
            containLabel: true,
        },
        legend: {
            top: "0%",
            y: "center",
            itemWidth: 14,
            itemHeight: 4,
            itemGap: 20,
            textStyle: {
                fontSize: 12,
                color: "#fff",
                padding: [0, 0, 0, 6],
            },
        },
        xAxis: [
            {
                type: "category",
                axisLine: {
                    lineStyle: {
                        color: "#ffffff",
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#ffffff",
                    },
                },
                data: myData3,
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "销量 / 单",
                splitNumber: 5,
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    align: "center",
                    padding: [0, 20, 5, 0],
                },
                axisLabel: {
                    formatter: "{value}",
                    color: "rgba(95, 187, 235, 1)",
                    textStyle: {
                        fontSize: 14,
                        color: "#fff",
                        lineHeight: 16,
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(28, 130, 197, .3)",
                        type: "dashed",
                    },
                },
            },
            {
                name: "增长额 / 万元",
                splitNumber: 5,
                type: "value",
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    align: "center",
                    padding: [0, 0, 5, 0],
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: "#fff",
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "销量",
                type: "bar",
                stack: "总量",
                barMaxWidth: 24,
                barGap: "10%",
                itemStyle: {
                    normal: {
                        show: true,
                        barBorderRadius: 0,
                        label: {
                            show: false,
                            position: "top",
                            color: "#56C1F8",
                            formatter: function (p) {
                                return p.value > 0 ? p.value : "";
                            },
                        },
                    },
                },
                data: numA,
            },
            {
                name: "销售额",
                yAxisIndex: 1,
                type: "line",
                showSymbol: false,
                symbol: "circle",
                smooth: true,
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#1BC7FF",
                    },
                },

                itemStyle: {
                    color: "#1BC7FF",
                    borderColor: "rgba(27, 199, 255, 0.30)",
                    borderWidth: 6,
                    shadowColor: "rgba(27, 199, 255, 0.5)",
                    shadowBlur: 6,
                    opacity: 1,
                },
                label: {
                    show: false,
                },
                data: xse, // 折线图的数据
            },
        ],
    };
    myChart&&myChart.setOption(option);
 
}
// 响应图表大小
const handleResize = () => {
    if (myChart) {
        console.log('出发没');
        
        myChart.resize();
    }
};

onMounted(() => {
    myChart = proxy.$echarts.init(box.value);
    rendercharts()
     window.addEventListener("resize", function () {
        myChart.resize();
     });
})

onBeforeUnmount(() => {
    window.removeEventListener("resize", function () {
        myChart.resize();
     });

})
</script>

<style lang="scss" scoped>
.ebox{
    width: 100%;
    height: 100%;
    .box{
        width: 98%;
        height: 100%;
        background: red;
    }

}

</style>